<template>
  <div class="container">
    <navbar class="de-navbar" :vaniconL="true" :noRight="false" :noLeft="false" :vaniconR="false" :rightSlot="true" iconNameL="arrow-left" iconNameR="records" @clickLeft="goBack">
      兼职列表
      <span slot="rightSlot" @click="myPartTime" class="rightBtn">我的兼职</span>
    </navbar>

    <div style="height: 0.45rem"></div>

    <div class="box-card-wrapper">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <el-card class="box-card" v-for="(item, index) in list" :key="index">
          <div slot="header" class="header">
            <span>类型：<span class="success">{{ item.projectType }}</span></span>
          </div>
          <div class="desc">
            <div class="title">简介：</div>
            <p class="content">{{ item.introduction }}</p>
          </div>
          <div class="desc">
            <div class="title">状态：</div>
            <p class="content">{{ partTimeStatusMap(item.status) }}</p>
          </div>
          <el-divider></el-divider>
          <div class="footer">
            <van-button plain size="small" type="info" @click.stop="detail(item)">查看详情</van-button>
          </div>
        </el-card>
      </van-pull-refresh>
    </div>
    
  </div>
</template>

<script>
import { get_project } from '@/api/AIPartTime'
import navbar from "@/components/navbar"
import { partTimeStatusMap } from './filters'

export default {
  components: {
    navbar
  },
  data() {
    return {
      list: [],
      isLoading: false
    }
  },
  mounted() {
    this.renderList()
    document.body.addEventListener('touchmove', this.touchmoveFn, {passive: false})
  },
  beforeDestroy() {
    document.body.removeEventListener('touchmove', this.touchmoveFn)
  },
  methods: {
    onRefresh() {
      this.renderList()
    },
    // 渲染列表
    renderList() {
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: "加载中..."
      })
      get_project().then(res => {
        if (res.data.status === 200) {
          this.list = res.data.info
        }
      }).finally(() => {
        this.$toast.clear()
        this.isLoading = false
      })
    },
    // 返回上一页
    goBack() {
      // this.$router.replace({ path: "/readList" })
      this.$router.go(-1)
    },
    // 我的兼职
    myPartTime() {
      this.$router.push({ path: '/AIPartTime_myPartTime' })
    },
    // 查看详情
    detail({ projectId }) {
      this.$router.push({ path: '/AIPartTime_detail', query: { projectId } })
    },
    partTimeStatusMap
  }
}
</script>
<style lang="scss" scoped>
.success {
  color: #67C23A;
}
.warning {
  color: #E6A23C;
}
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
  text-align: center;
  .de-navbar {
    width: 100%;
    height: 0.45rem;
    position: fixed;
    top: 0;
    z-index: 10;
    background: #4775d9;
    background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
    color: #fff;
  }
  .rightBtn {
    font-size: .12rem;
  }
  .box-card-wrapper {
    flex: 1;
    overflow-y: scroll;
    .van-pull-refresh {
      padding-top: 0.15rem;
      .box-card {
        width: 95%;
        display: inline-block;
        margin-bottom: 0.15rem;
        border-radius: 8px;
        /deep/ .el-card__header {
          padding: 0 20px;
        }
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 0.4rem;
        }
        /deep/ .el-card__body {
          text-align: left;
          min-height: .666667rem;
          padding: 0.1rem 0.2rem;
        }
        .desc {
          display: flex;
          .title {
            width: .533333rem;
            line-height: .266667rem;
            font-size: 15px;
          }
          .content {
            flex: 1;
            line-height: .266667rem;
            font-size: 15px;
          }
        }
        .el-divider {
          margin: 0.1rem 0;
        }
        .footer {
          text-align: right;
        }
      }
    }
  }
  
  
}
</style>